// 静态网页（没有数据渲染的页面） 和 动态网页 （根据数据渲染页面）;

// 根据数据渲染页面
// 接口文档

// 一、把数据里的path渲染到页面上 ；
// console.log(goodData);
function renderPath(path) {
  var conPointEle = document.querySelector(".conPoint");
  // 根据path里的数据渲染视图 ；
  // 把之前的内容清空掉
  conPointEle.innerHTML = "";
  path.forEach(function (item) {
    var aEle = document.createElement("a");
    aEle.innerHTML = item.title;
    aEle.href = item.url;
    conPointEle.appendChild(aEle);
  });
}

renderPath(goodData.path);

// 二、渲染产品详细页面
function rendergoodsDetail(goodsDetail) {
  var priceAreaEle = document.querySelector(".priceArea");
  priceAreaEle.innerHTML = `<h3 class="title">${goodsDetail.title}</h3>
    <p class="con1">${goodsDetail.recommend}</p>
    <div class="price">
        <div class="priceDetail">
            <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
            <p>￥ <span>${goodsDetail.price}</span> 元</p>
        </div>
        <div class="buy">
            <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
            <p><span>${goodsDetail.promoteSales.type}</span>${goodsDetail.promoteSales.content}</p>
        </div>
    </div>
    <div class="support">
        <div class="supportDetail">
            <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
            <p>${goodsDetail.support}</p>
        </div>
        <div class="address">
            <p>配&nbsp;送&nbsp;至</p>
            <p>${goodsDetail.address}</p>
        </div>
    </div>`;
}

rendergoodsDetail(goodData.goodsDetail);

// 三、渲染产品的型号
var chooseArea = document.querySelector(".chooseArea");

//  arr = [[1,1][2,1][3,1][4,1]]
var arr = []; // 被选中的 型号
function renderType(types) {
  types.forEach(function (item, k) {
    // console.log("行",k);
    var dlEle = document.createElement("dl");
    var dtEle = document.createElement("dt");
    dtEle.innerHTML = item.title;
    dlEle.appendChild(dtEle);

    // 根据 data里的数据 渲染dd 元素；
    item.data.forEach(function (val, kk) {
      var ddEle = document.createElement("dd");
      // console.log("列",kk);
      ddEle.innerHTML = val.type;
      dlEle.appendChild(ddEle);
      // 每个 dd 元素里 就有 行和 列的信息；
      ddEle.k = k; // 记录dd所在的行
      ddEle.kk = kk; // 记录dd所在的列

      // 先生成数组
      // 默认把所有型号的第一个元素加入到arr里
      if (kk == 0) {
        ddEle.showText = ddEle.innerHTML;
        arr.push(ddEle);
      }

      ddEle.onclick = function () {
        console.log("点击了dd按钮,行是:", k);
        arr[k] = this; // 元素里记录的有 行和列
        arr[k].showText = this.innerHTML; // 修改数组里对应行数的数据；
        // console.log(arr);
        // console.log(dlEle);
        var dds = dlEle.querySelectorAll("dd"); // 获取点击 这一行的所有的dd元素
        // console.log(dds);
        dds.forEach(function (item) {
          // 把点击当前这行的所有dd的红色颜色去掉
          item.style.color = "#666";
        });

        // 把当前点击dd的颜色变成红色 ；
        this.style.color = "red";

        renderChioseType(arr);
        // this.k = k;  // 记录 dd所在的行
        // this.kk = kk;  // 记录 dd 所在的列
        // 如果之前有加过 ，就不在加入数组里 ；
        // if(arr.indexOf(this)===-1){
        //     arr.push(this);
        //     console.log(arr);
        // }
      };
    });
    console.log(dlEle);
    chooseArea.appendChild(dlEle);
  });

  console.log(arr);
}

renderType(goodData.goodsDetail.crumbData);

//三、 根据 arr 来渲染 视图 ，arr里存放的是选中型号的 dd元素；

// 四、点击 型号的 关闭按钮 取消选中的型号 ；

var price; // 手机的初始价钱；

function renderChioseType(arr) {
  price = goodData.goodsDetail.price; // 每次在计算价钱的时候重新获取初始值；
  var chooseInsertEle = document.querySelector(".chooseInsert");
  chooseInsertEle.innerHTML = "";
  arr.forEach(function (item, key) {
    if (item.showText) {
      // 一个item 需要生成一个 mark标签
      var markEle = document.createElement("mark");
      markEle.innerHTML = `${item.showText}<a>X</a>`;
      // 点击每个 dd按钮选择型号的时候 都会执行renderChioseType 函数 ，所以在这个函数里做价钱的计算
      // console.log(item);

      // 找到所有的价钱相关数据；
      // console.log("??",item.kk);
      console.log(
        goodData.goodsDetail.crumbData[item.k].data[item.kk].changePrice
      );
      price += goodData.goodsDetail.crumbData[item.k].data[item.kk].changePrice;

      // 获取关闭按钮
      var closeBtn = markEle.querySelector("a");
      closeBtn.onclick = function () {
        // 点击了 关闭按钮
        console.log("点击了关闭按钮", key);
        // 1.需要把选中的型号 删除掉 2.需要把型号对应的行数里的样式全部变成灰色；

        // 删除型号  删除数组里的元素 ，之后再重新渲染 ；
        // var delEle = arr.splice(key, 1);
        // // console.log(delEle);
        // console.log("删除之后的数组?", delEle[0].k);
        var dls = chooseArea.querySelectorAll("dl");
        // // dls
        // // console.log(dls);
        // dls[delEle[0].k].querySelectorAll("dd").forEach(function(item){
        //     item.style.color = "#666";
        // })
        arr[key].showText = "";
        dls[arr[key].k].querySelectorAll("dd").forEach(function (item) {
          item.style.color = "#666";
        });

        renderChioseType(arr);
      };

      chooseInsertEle.appendChild(markEle);
    }
  });

  // console.log("价钱",price);  // 累计完毕之后的price价钱；
  // 型号影响价钱   ，数量需要影响价钱；
  var inputValue = document.querySelector(".num input");
  document.querySelector(".priceDetail span").innerHTML =
    price * inputValue.value;
  document.querySelector(".master p").innerHTML = "￥" + price;
}
renderChioseType(arr);

// 点击加或者减按钮的时候 修改手机的数量 ，手机的价钱；

var plusEle = document.querySelector(".plus");
var inputValue = document.querySelector(".num input");
var minsEle = document.querySelector(".mins");
// 点击加按钮的时候 输入框的值需要添加
plusEle.onclick = function () {
  inputValue.value++;
  renderChioseType(arr);
};

// 点击减按钮的时候 数量需要减

minsEle.onclick = function () {
  if (inputValue.value > 1) {
    inputValue.value--;
    renderChioseType(arr);
  }
};

// 套餐价钱；点击勾选之后要计算 手机和套餐一起的价格 ；

var suitsEles = document.querySelectorAll(".suits input");
var masterEle = document.querySelector(".master p");
// console.log(suitsEles);
suitsEles.forEach(function (item) {
  item.onclick = function () {
    console.log("点击了checkbox", masterEle.innerHTML);
    var phonePrice = parseInt(masterEle.innerHTML.substr(1));
    // console.log(phonePrice);
    suitsEles.forEach(function (val) {
      // 累加的结果是 checkbox 被勾选了；
      if (val.checked) {
        // console.log(val);
        phonePrice += parseInt(val.value);
      }
    });
    // console.log("组合的价格",phonePrice);
    console.log(document.querySelector(".price"));
    document.querySelector(".result .price").innerHTML = "￥" + phonePrice;
  };
});

// -------------------------------放大镜逻辑 -----------------------------------

// 一、根据数据渲染视图 ；

// 渲染大图
// var smallAreaEle = document.querySelector(".smallArea");
// var bigImg = smallAreaEle.querySelector("img");
// bigImg.src = goodData.imgsrc[0].b;

// // 渲染小图 ；
// var ullist = document.querySelector(".list");

// goodData.imgsrc.forEach(function (item) {
//   var liEle = document.createElement("li");
//   // var listr = "<li></li>";
//   liEle.innerHTML = `<img src='${item.s}' />`;
//   ullist.appendChild(liEle);
// });

// 二、鼠标移入到放大镜区域的时候 蒙版显示 ，离开的时候 蒙版隐藏 ；

// 三、当鼠标在 显示区域移动的时候 ，蒙版需要跟随鼠标的移动
var previewEle = document.querySelector(".preview");

// var maskEle = document.querySelector(".mask");

// var bigAreaEle = document.querySelector(".bigArea");

// 鼠标移入的时候蒙版需要显示
previewEle.onmouseenter = function () {
  maskEle.style.display = "block"; //蒙版显示出来
  // 放大图 也需要显示出来
  bigAreaEle.style.display = "block";
};

// 鼠标离开的时候 蒙版需要隐藏起来
previewEle.onmouseleave = function () {
  maskEle.style.display = "none";
  bigAreaEle.style.display = "none";
};

previewEle.onmousemove = function (e) {
  console.log("鼠标移动了", this.getBoundingClientRect().left);
  var x = e.clientX - this.getBoundingClientRect().left;
  var y = e.clientY - this.getBoundingClientRect().top;

  // 限定蒙版的拖动范围
  var disX = x - maskEle.offsetWidth / 2;
  var disY = y - maskEle.offsetHeight / 2;
  // 左边
  if (disX <= 0) {
    disX = 0;
  }
  // 右边
  if (disX >= this.clientWidth - maskEle.offsetWidth) {
    disX = this.clientWidth - maskEle.offsetWidth;
  }

  // 上边
  if (disY <= 0) {
    disY = 0;
  }

  // 下边
  if (disY >= this.clientHeight - maskEle.offsetHeight) {
    disY = this.clientHeight - maskEle.offsetHeight;
  }

  // 右边的大图跟随蒙版移动
  var bigImg = bigAreaEle.querySelector("img");
  var bigImgWidth = bigImg.offsetWidth;
  var bigImgHeight = bigImg.offsetHeight;
  var maxX = (maskEle.offsetLeft / this.offsetWidth) * bigImgWidth;
  var maxY = (maskEle.offsetTop / this.offsetHeight) * bigImgHeight;
  bigImg.style.left = "-" + maxX + "px";
  bigImg.style.top = "-" + maxY + "px";

  maskEle.style.left = disX + "px";
  maskEle.style.top = disY + "px";
  // console.log(x,y);
};

// 当鼠标移入到小图的时候，切换上面显示的图和放大的图形；

// var listImgEles = document.querySelectorAll(".list img");
// // console.log(listImgEles);
// listImgEles.forEach(function (imgEle, k) {
//   imgEle.onmouseenter = function () {
//     // 把之前的有样式的边框都先去掉 ；
//     listImgEles.forEach(function (item) {
//       item.style.border = "1px solid #ccc";
//     });
//     this.style.border = "1px solid red"; // 把当前选中的 图片边框变成红色
//     // console.log(k);
//     // 获取 图片对应的数据
//     console.log(goodData.imgsrc[k]);

//     // 把显示区域的图片换成 数据里的地址
//     smallAreaEle.querySelector("img").src = goodData.imgsrc[k].b;
//     // 替换 放大区域的图片的路径地址 ；
//     bigAreaEle.querySelector("img").src = goodData.imgsrc[k].b;
//   };
// });

// 放大镜的小图 ，点击下一页 上一页可以切换
// 下一页
// var rightEle = document.querySelector(".right");
// var listEle = document.querySelector(".list");

// rightEle.onclick = function () {
//   console.log("点击了下一个");
//   var marginLeftNum = parseInt(getComputedStyle(listEle)["margin-left"]);
//   // console.log(marginLeftNum)
//   if (marginLeftNum > -9 * 76) {
//     marginLeftNum -= 76;
//     listEle.style.marginLeft = marginLeftNum + "px";
//   }
// };

// 上一页
var leftEle = document.querySelector(".left");

leftEle.onclick = function () {
  var marginLeftNum = parseInt(getComputedStyle(listEle)["margin-left"]);
  if (marginLeftNum < 0) {
    marginLeftNum += 76;
    listEle.style.marginLeft = marginLeftNum + "px";
  }
};

// 选项卡的切换
// 获取按钮
var tabBtns = document.querySelectorAll(".tabTitle h4");
// console.log(tabBtns);
var tabPlans = document.querySelectorAll(".tabContent .tab-pane");

new Tab(tabBtns, tabPlans);

// 下面的选项卡；
var lis = document.querySelectorAll(".tab-wraped li");
var divs = document.querySelectorAll(".tab-content .tab-pane");
console.log(divs);
new Tab(lis, divs);

// tabBtns.forEach(function(btn,k){
//     btn.onclick = function(){
//         // console.log("点击了按钮",k)
//         // 按钮加上样式 ；
//         tabBtns.forEach(function(val,key){
//             if(key==k){
//                 val.classList.add("active");
//             }else{
//                 val.classList.remove("active");
//             }
//         })
//         tabPlans.forEach(function(div,kk){
//             if(kk==k){
//                 div.style.display = "block";
//             }else{
//                 div.style.display = "none";
//             }
//         })
//     }
// })
